<style lang="scss" scoped>
@import '../../style/mixin-rem.scss';
.book-details-content-chapter {
  border-top: rem(1px) solid #d8d8d8;
  margin-top: rem(24px);
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: rem(16px);
    .title {
      font-size: rem(24px);
      font-weight: 800;
      color: #42464e;
    }
    .link {
      font-size: rem(24px);
      color: #ff3c31;
    }
  }
  .content {
    margin-top: rem(32px);
    .item {
      font-size: rem(24px);
      color: #42464e;
      margin-bottom: rem(16px);
    }
  }
}
</style>

<template>
  <div class="book-details-content-chapter">
    <div class="header">
      <div class="title">最新章节预览</div>
      <router-link class="link" tag="div" to="/directory">[目录]</router-link>
    </div>
    <div class="content">
      <div class="item" v-for="item of chapter" :key="item.id" v-text="item"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'bookDetailsContentChapter',
  computed: {
    chapter () {
      return this.$store.state.bookDetails.chapterDirectory
    }
  }
}
</script>
